<template>
	<view class="container">
		<van-nav-bar title="添加挂单" :border='false' left-arrow @click-left='leftHistory' />
		<view class="title">
			收购类型：KOI
		</view>
		<view class="convert">
			<view class="purchase bottom">
				<view class="purchaseTitle ">收购单价</view>
				<view class="content">
					1KOI=
					<!-- <van-field v-model="UnitPrice" /> -->
					<uni-easyinput v-model="UnitPrice" placeholder="" :clearable='false' color='#fff' uni-easyinput></uni-easyinput>
					USDT
				</view>
			</view>
			<view class="purchase">
				<view class="purchaseTitle"></view>
				<view class="content text">
					<view>昨天KOI收盘价1.1111USDT，</view>
					<view>不能低于收盘价收购 <text class="history">查看历史价格</text></view>
				</view>
			</view>
			<view class="purchase">
				<view class="purchaseTitle">收购数量</view>
				<view class="content">
					1KOI=
					<van-field v-model="NumberPrice" />
					USDT
				</view>
			</view>
			<view class="purchase last">
				<view class="purchaseTitle">单笔最大 数量</view>
				<view class="content">
					1KOI=
					<van-field v-model="MaxNumberPrice" />
					USDT
				</view>
			</view>
		</view>
		<!--  -->
		<view class="Tips">
			<view><text class="Tipstitle">收购方式</text><text class="TipsCenter">USDT</text></view>
			<view><text class="Tipstitle">账户余额</text><text class="TipsCenter">61452.215USDT</text></view>
		</view>
		<view class="Instructions">
			<view class="InstructionsTitle">说明</view>
			<view class="InstructionsContent">确认挂单后，会从您的账户冻结对应USDT数量，每完成一笔收购订单，您就会收到对应的KOI。如果您停止挂单，剩余的USDT会退回到您的账户。
			</view>
		</view>
		<view class="footer">
			<button class="btns" @click="pendingOrder">
				确认挂单
			</button>
		</view>
		<PaymentSuccess ref='popup'>
			<template v-slot:title>输入密码</template>
			<template v-slot:cont>
				<view class="ejectCont">
					<view class="title">安全密码</view>
					<van-field class="pas" id="pass" v-model="Paypwd" :type="pwd? 'password':'text'"
						@click-right-icon='Show' @input="changeValue">
						<template #right-icon>
							<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
							<van-icon v-else name="closed-eye" color="#848496" size='20' />
						</template>
					</van-field>
					<view class="tipsRed">忘记密码?</view>
					<view class="bottoms">
						<view class="bottomsBtn" @click="spending">确认挂单</view>
					</view>
				</view>
			</template>
		</PaymentSuccess>
	</view>
</template>

<script lang="ts" setup>
	import { showNotify } from 'vant';
	import { ref } from 'vue';
	import { addOrder } from '@/api/service'
	import PaymentSuccess from '@/homeSub/eject/eject.vue';
	// 输入密码弹出框
	const popup = ref()
	// 收购单价
	const UnitPrice = ref('')
	// 收购数量
	const NumberPrice = ref('')
	// 单笔最大数量
	const MaxNumberPrice = ref('')
	// 字符密码
	const Paypwd = ref<string>('')
	// 控制密码的显示
	const pwd = ref<boolean>(true);
	const pendingOrder = async () => {
		console.log('挂单')
		if (UnitPrice.value === "" || NumberPrice.value === "" || MaxNumberPrice.value === "") {
			showNotify({ type: 'danger', message: '请填写全部数据' })
			return
		} else {
			popup.value.open('bottom')
		}
	}
	const leftHistory = () => { history.back() }
	// 密码的显示切换
	const Show = () => {
		pwd.value = !pwd.value
	}
	// 改变输入框里面的值
	const changeValue = () => {
		console.log(Paypwd.value)
	}
	// 确认挂单
	const spending = async () => {
		if (Paypwd.value === '') {
			showNotify({ type: 'danger', message: '请填写密码' })
			return
		}
		var res = await addOrder({
			type: 0,
			price: UnitPrice.value,
			amount: NumberPrice.value,
			usdtAmount: "10000",
			maxLimit: MaxNumberPrice.value,
			minLimit: "1",
			payPassword: Paypwd.value
		})
		console.log('1', res)
		if (res.code === 500) {
			showNotify({ type: 'danger', message: res.msg })
		} else {
			uni.navigateTo({
				url: '/service/Successful/index'
			})
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.van-nav-bar__title,
	.van-ellipsis {
		font-size: 36px;
		color: white;
		font-weight: 500;
		overflow: visible;
	}

	::v-deep.van-nav-bar__content {
		height: 88px;
		background-color: #121317;
	}

	::v-deep.van-nav-bar__arrow {
		font-size: 32px;
		color: #ffffff;
	}

	.container {
		height: 100vh;
		background: #121317;
		padding: 0 32px;

		.title {
			color: white;
			font-size: 36px;
			padding: 40px 0;
		}

		.convert {
			padding: 40px;
			box-sizing: border-box;
			width: 100%;
			background-color: #2a2b2e;
			border-radius: 16px;

			.purchase {
				display: flex;
				height: 88px;
				align-items: center;
				margin-bottom: 40px;

				.purchaseTitle {
					width: 100px;
					font-size: 24px;
					color: white;
					margin-right: 24px;
				}

				// .bottom{
				// 	margin-bottom: 16px;
				// }
				.content {
					font-size: 28px;
					color: white;
					display: flex;
					align-items: center;
				}

				.text {
					flex-direction: column;
					justify-content: left;
					align-items: flex-start;
					color: #afafb0;

					.history {
						color: #00D0B9;
						font-size: 24px;
						// text-decoratio;
					}
				}
			}

			.bottom {
				margin-bottom: 16px;
			}

			.last {
				margin-bottom: 0;
			}
		}

		.Tips {
			height: 160px;
			margin: 32px 0;
			width: 100%;
			background-color: #2a2b2e;
			border-radius: 16px;

			view {
				height: 80px;
				padding: 0 32px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.Tipstitle {
					font-size: 24px;
					color: #ffffff;
				}

				.TipsCenter {
					font-size: 24px;
					color: #afafb0;
				}
			}
		}

		.Instructions {
			padding: 24px 32px;
			display: flex;
			background-color: #2a2b2e;
			border-radius: 16px;


			.InstructionsTitle {
				padding-right: 24px;
				width: 50px;
				font-size: 24px;
				color: white;
			}

			.InstructionsContent {
				font-size: 24px;
				color: #afafb0;
				flex: 1;
				letter-spacing: 1.5px;

			}
		}
	}

	::v-deep.van-cell {
		width: 240px;
		height: 88px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16px;
		border: 2px solid rgba(255, 255, 255, 0.6);
		margin: 0 15px;
	}

	.footer {
		width: 100vw;
		height: 112px;
		background: rgb(0, 0, 0);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;

		.btns {
			width: 280px;
			height: 80px;
			background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
			border-radius: 16px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 88px;
		}
	}

	.ejectTitle {
		position: relative;
		height: 98px;
		background-color: rgba(34, 35, 36, 1);
		text-align: center;
		margin-left: 32px;
		margin-right: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);

		span {
			height: 48px;
			font-size: 40px;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 98px;
		}

		image {
			// background-color: #A82DC0;
			position: absolute;
			width: 72px;
			height: 72px;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}

	.ejectCont {
		width: 600px;
		margin: 0 auto;
		background-color: rgba(34, 35, 36, 1);

		.pas {
			width: 100%;
		}

		.title {
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			// font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
			margin-bottom: 16px;
			margin-top: 47px;
		}

		.ContItem {
			width: calc(100% - 42px);
			padding-left: 42px;
			height: 88px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
			border: 2px solid rgba(255, 255, 255, 0.6);
			font-size: 28px;
		}

		.tips {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 24px;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 31px;
			opacity: 0.7;
			margin-top: 16px;
		}

		.tipsRed {
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #E4434C;
			line-height: 33px;
			text-align: right;
			text-decoration: underline;
			margin-top: 16px;
			margin-bottom: 40px;
		}
	}

	.bottoms {
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);

		.bottomsNum {
			padding-left: 40px;
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			color: #FFFFFF;
			line-height: 56px;
			letter-spacing: 1px;

			span {
				font-size: 20px;
			}
		}

		.bottomsBtn {
			margin-right: 32px;
			width: 280px;
			height: 80px;
			background: #00D0B9;
			border-radius: 16px;
			text-align: center;
			line-height: 80px;
			color: #fff;
			font-size: 28px;
		}

	}

	::v-deep #pass {
		text-align: left !important;
	}

	::v-deep .uni-easyinput {
		height: 88px;
		background: rgba(255, 255, 255, 0.10);
		border: 2px solid rgba(255, 255, 255, 0.6);
		border-radius: 16px;
		color: #fff;

	}

	::v-deep .uni-easyinput__content {
		background-color: transparent !important;
		border-width: 0px !important;
	}

	::v-deep .uni-easyinput__content-input {
		height: 88px;
		background-color: transparent !important;
		border-width: 0px !important;
	}

	::v-deep .uni-input-input {
		height: 88px;
		line-height: 88px;
		background-color: transparent !important;
		border-width: 0px !important;
		font-size: 24px;
	}

	::v-deep .van-field {
		height: 88px;
		background: rgba(255, 255, 255, 0.10);
		border: 2px solid rgba(255, 255, 255, 0.6);
		border-radius: 16px;
		color: #fff;
		text-align: center;
	}

	::v-deep .van-field__control {
		color: #fff !important;
		line-height: 66px !important;
		text-align: center;
	}

	.equipmentCode {
		width: 91%;
		margin: 40px auto 0 auto;
		color: #fff;
		font-size: 24px;

		.Remaining {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 16px 0;

			.greenColor {
				color: rgba(0, 208, 185, 1);
			}
		}

		.steep {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			--van-stepper-input-font-size: 28px
		}
	}
</style>